<template>
  <div class="addCarType">

    <!-- Form -->
    <el-dialog width="800px" :visible="true" :before-close="cancelBtn" :close-on-click-modal="false">
      <div slot="title">
        <div class="addTitle">{{ title }}</div>
      </div>
      <el-form :model="form" label-position="top" :label-width="formLabelWidth" v-if="state!='info'">
        <el-form-item label="角色名称:" >
          <el-input v-model="form.role_name" autocomplete="off" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="角色key:" >
          <el-input v-model="form.role" autocomplete="off" placeholder="请输入角色key"></el-input>
        </el-form-item>
        <el-form-item label="收费类型:" >
          <el-select v-model="form.charge_type" placeholder="选择收费类型" clearable>
            <!-- <el-option label="未设定，按角色收费表的规则收费" value="none"></el-option> -->
            <el-option label="增加费用" value="positive"></el-option>
            <el-option label="减少费用" value="negative"></el-option>
            <el-option label="原价" value="original"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="增减收费额的幅度" >
          <el-input v-model="form.charge_amount" type="number" autocomplete="off" placeholder="请输入增减收费额的幅度"></el-input>
        </el-form-item>

        <el-form-item label="续重收费规则:" v-if="form.charge_type != 'none'">
          <el-table
            :data="form.charge_weight_amount"
            style="width: 100%">
            <el-table-column label="最大重量" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.max_weight" autocomplete="off" placeholder="最大重量"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="起始重量" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.start_weight" autocomplete="off" placeholder="起始重量"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="递增费用(元)" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.incremental_cost " autocomplete="off" placeholder="递增费用(元)"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="small" icon="el-icon-delete" style="color: #F56C6C;" @click="del(scope)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button type="primary" style="width: 100%;" @click="add">新增</el-button>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelBtn">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {userRoleAdd, userRoleEdit} from "@/api"
import EditorBar from "@/components/wangEditor";
export default {
  name: "addClass",
  components: {
    EditorBar
  },
  props:['item','state','closeAlert'],
  data(){
    return{
      form: {
        role:'',
        role_name:'',
        charge_amount:'',
        charge_type:'',
        charge_weight_amount:[],
      },
      formLabelWidth: '120px',
      title: '',
    }
  },
  mounted() {
    console.log(this.state)
    if(this.state == 'edit'){
      this.info()
      this.title = '编辑'
    }else{
      this.title = '新增'
    }
  },
  methods:{
    // 详情
    async info(){
      this.form = this.item
      console.log(this.form)
    },
    // 确认
    async confirm(){
      if(this.state == 'add'){
        // 添加
        this.handleConvenientSave();
      }else{
        // 修改
        this.handleConvenientEdit()
      }

    },
    async handleConvenientSave(){
      console.log(this.form)
      // return
      await userRoleAdd(this.form).then(res=>{
        if (res.code==10000){
          this.$message({
            message: res.message,
            type: 'success'
          });
          this.cancelBtn();
        }
      })
    },
    async handleConvenientEdit(){
      await userRoleEdit(this.form).then(res=>{
        if (res.code==10000){
          this.$message({
            message: res.message,
            type: 'success'
          });
          this.cancelBtn();
        }
      })
    },
    //
    del(row){
      console.log(row.$index)
      this.form.charge_weight_amount.splice(row.$index,1)
    },
    add(){
      this.form.charge_weight_amount.push({
        max_weight:'',
        start_weight:'',
        incremental_cost:''
      })
    },
    // 关闭弹窗
    cancelBtn(){
      this.$emit('closeAlert',false)
    }
  }
}
</script>

<style scoped lang="less">
.addTitle{
  font-size: 28px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #000000;
}
/deep/.el-dialog__header,
/deep/.el-dialog__body,
/deep/.el-dialog__footer{
  padding-left: 45px;
  padding-right: 45px;
}
/deep/.el-form-item__label{
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
}
///deep/.el-form-item__content input{
//  border: none;
//  background: #F4F4F4;
//  border-radius: 10px;
//}
.el-select{
  width: 100%;
}

</style>

